<template>
	<view class="msg-box">
		<view class="user-box">
			<view class="cus-title">车辆信息</view>
			<view class="user-type">				
				<formItem label="VIN" v-model="form.vin" titleType="dotted-title" placeholder="请输入"></formItem>
				<formItem label="车牌号" v-model="form.carLicense" titleType="dotted-title" placeholder="请输入"></formItem>
				<formItem label="车辆用途" v-model="form.carUse" titleType="dotted-title" disabled="true" placeholder="请输入" @click.native="getCaruse">
					<slot>	
						<view v-if="form.carUse === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
						{{form.carUse === undefined ? '' : form.carUse}}
					</slot>
				</formItem>
				<formItem label="品牌" v-model="form.vehiclebrand" titleType="dotted-title" disabled="true" @click.native="getCarbrand">
					<slot>
						<view v-if="form.vehiclebrand === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
						{{form.vehiclebrand === undefined ? '' : form.vehiclebrand}}
					</slot>
				</formItem>
				<formItem label="车系" v-model="form.carSeriesCode" titleType="dotted-title" placeholder="请输入"></formItem>				
			</view>
		</view>
		<view class="user-box" style="margin-top: 24upx;">
			<view class="cus-title">客户信息</view>
			<view class="user-type">				
				<formItem label="客户姓名" v-model="form.customerName" titleType="dotted-title" placeholder="请输入"></formItem>
				<formItem label="联系电话" v-model="form.tel" titleType="dotted-title" placeholder="请输入"></formItem>
				<formItem label="性别" v-model="form.sex" titleType="dotted-title" placeholder="请输入"  @click.native="getSexList">
					<view v-if="form.sex === undefined" class="check-text">
						请选择
						<u-icon  name="arrow-right"></u-icon>
					</view>
					{{form.sex === undefined ? '' : form.sex}}
				</formItem>
				<formItem label="省份" v-model="form.province" titleType="dotted-title" placeholder="请输入" @click.native="getprovinceList">
					<slot>
						<view v-if="form.province === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
						{{form.province === undefined ? '' : form.province}}
					</slot>
				</formItem>
				<formItem label="城市" v-model="form.city" titleType="dotted-title" placeholder="请输入" @click.native="getcityList">
					<slot>
						<view v-if="form.city === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
						{{form.city === undefined ? '' : form.city}}
					</slot>
				</formItem>
				<formItem label="区县" v-model="form.county" titleType="dotted-title" placeholder="请输入" @click.native="getareaList">
					<slot>
						<view v-if="form.county === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
						{{form.county === undefined ? '' : form.county=== null ? '' : form.county}}
					</slot>
				</formItem>
				<formItem label="联系地址" v-model="form.contactAddress" titleType="dotted-title" placeholder="请输入"></formItem>
				<formItem label="出生日期" v-model="form.dateOfBirth" titleType="dotted-title" placeholder="请输入" @click.native="getbirthday">
					<slot>
						<view v-if="form.date === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
						{{form.date === undefined ? '' : form.date}}
					</slot>
				</formItem>
				<formItem label="民族" v-model="form.nation" titleType="dotted-title" placeholder="请输入" @click.native="getnation">
					<slot>						
						<view>
							{{form.nation === undefined ? '' : form.nation}}
						</view>
						<view v-if="form.nation === undefined" class="check-text">
							请选择
							<u-icon  name="arrow-right"></u-icon>
						</view>
					</slot>
				</formItem>
			</view> 
			<view style="margin-top: 36upx;margin-bottom: 36upx;">
				<u-button type="primary" @click="save">保存</u-button>
			</view>
		</view>
		
		<u-picker v-model="chechTime" mode="time" @confirm="getTime"></u-picker>
		<u-select v-model="show" mode="single-column" :list="list" :value-name="ValueName" :label-name="LabelName" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import formItem from '../../../components/lt-formItem/index.vue'
	import { getVehicleUseList, getVehicleBrandList, getSexList, getProvinceList, getCityList, getCountyList, getNationList } from '../../../api/common.js';
	import { CustomerVehicle } from '../../../api/cusList.js'
	import storage from '../../../utils/Stroage.js'
	export default{
		components:{
			formItem
		},
		props:{
			cusType:{type:String,default:'person'}
		},
		created(){
		  
		},
		data(){
			return{
				disabled:true,
				show:false,
				chechTime:false,
				list:[],
				// 加载数据字段显示label value
				ValueName:'',
				LabelName:'',
				// 绑定字段label value
				modelLabel:'',
				modelValue:'',
				carList:[
					{
						label:'VIN',
						model:'cusName'
					},{
						label:'车牌号',
						model:''
					},{
						label:'品牌',
						model:''
					},{
						label:'车系',
						model:''
					}
				],
				form:{
					cusName:'测试名字'
				}
			}
		},
		methods:{
			async save(){
				let res = await CustomerVehicle(this.form)
				console.log(res)
				uni.showToast({
					title:res.msg,
					icon:'none',
					duration:2000
				})
				if(res.result === '1') uni.navigateBack()		
			},
			async getCaruse(){
				this.ValueName = 'vehicleUseCode'
				this.LabelName = 'vehicleUseName'
				this.modelLabel = 'carUse'
				this.modelValue = 'vehicleUseCode'
				let res = await getVehicleUseList()
				this.list = res.rows.vehicleUseList
				this.show = true 
			},
			getbirthday(){
				this.chechTime = true 
			},
			async getCarbrand(){
				this.ValueName = 'carBrandCode'
				this.LabelName = 'carBrandName'
				this.modelLabel = 'vehiclebrand'
				this.modelValue = 'carBrandCode'
				let res = await getVehicleBrandList()
				this.list = res.rows.carBrandList
				this.show = true
			},
			getTime(val){
				this.form.date = val.year + '-' + val.month + '-' + val.day
				this.form.dateOfBirth = val.timestamp
				console.log(val.timestamp)
			},
			async getSexList(){
				this.ValueName = 'sexCode'
				this.LabelName = 'sexName'
				this.modelLabel = 'sex'
				this.modelValue = 'sexCode'
				let res = await getSexList()
				this.list = res.rows.sexList
				this.show = true
			},
			async getnation(){
				this.ValueName = 'nationCode'
				this.LabelName = 'nationName'
				this.modelLabel = 'nation'
				this.modelValue = 'nationCode'
				let res = await getNationList()
				this.list = res.rows.nationList
				this.show = true
			},
			async getprovinceList(){
				this.ValueName = 'provinceCode'
				this.LabelName = 'provinceName'
				this.modelLabel = 'province'
				this.modelValue = 'provinceCode'
				this.form.city = this.form.cityCode = undefined
				let res = await getProvinceList()
				this.list = res.rows.provinceList
				this.show = true
			},
			async getcityList(){
				if(!this.form.province){
					uni.showToast({
					    title: '请选择省份',
						icon:'none',
					    duration: 2000
					});
					return 
				}
				this.ValueName = 'cityCode'
				this.LabelName = 'cityName'
				this.modelLabel = 'city'
				this.modelValue = 'cityCode'
				this.form.county = this.form.countyCode = undefined
				let res = await getCityList({provinceId:this.form.provinceCode})
				this.list = res.rows.cityList
				this.show = true
			},
			async getareaList(){
				if(!this.form.province){
					uni.showToast({
					    title: '请选择城市',
						icon:'none',
					    duration: 2000
					});
					return 
				}
				this.ValueName = 'countyCode'
				this.LabelName = 'countyName'
				this.modelLabel = 'county'
				this.modelValue = 'countyCode'
				let res = await getCountyList({cityId:this.form.cityCode})
				this.list = res.rows.countyList
				this.show = true
			},			
			confirm(val){
				this.form[this.modelLabel] = val[0].label
				this.form[this.modelValue] = val[0].value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-box{
		padding: 24upx 24upx 24upx 24upx;
		.user-box{
			background-color: #fff;
			.cus-title{
				width: 100%;
				height: 80upx;
				// background-color: #f05;
				line-height: 80upx;
				padding-left: 24upx;
				border-bottom: 1upx solid #ddd;
			}
			.user-type{
				padding:0 12upx 48upx 12upx ;
				.check-text{
					color: #dddddd;
				}
			}
		}
	}
</style>
